<template>
<v-app>
   <v-container
        class="fill-height"
        fluid
      >
        <v-row
          align="center"
          justify="center"
        >
          <v-col
            cols="12"
            sm="8"
            md="4"
          >
            <v-card class="elevation-12">
              <v-toolbar
                color="primary"
                dark
                flat
              >
                <v-toolbar-title>Login form</v-toolbar-title>
                <v-spacer></v-spacer>
                <v-tooltip bottom>
                  <template v-slot:activator="{ on,attrs}">
                    <v-btn
                      :href="source"
                      icon
                      large
                      target="_blank"
                      v-on="on"
                      v-bind="attrs"
                      @click="dialog = true"
                    >
                      <v-icon>mdi-qrcode-scan</v-icon>
                    </v-btn>
                  </template>
                  <span>扫码登录</span>
                </v-tooltip>
                 <v-dialog 
                v-model="dialog"
                max-width="350"
                max-height="350">
                  <v-card>
        <v-card-title class="headline">
          扫码登录
        </v-card-title>

        <v-card-text style="width:350px;"> 
<v-img class="ma-auto"
  max-height="250"
  max-width="250"
  :src=image_src
></v-img>
        </v-card-text>

        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn
            color="primary"
            text
            @click="dialog = false"
          >
          close
          </v-btn>
        </v-card-actions>
      </v-card>
                </v-dialog>

              </v-toolbar>
              <v-card-text>
                <v-form>
                  <v-text-field
                    label="Login"
                    name="login"
                    prepend-icon="mdi-account"
                    type="text"
                  ></v-text-field>

                  <v-text-field
                    id="password"
                    label="Password"
                    name="password"
                    prepend-icon="mdi-lock"
                    type="password"
                  ></v-text-field>
                </v-form>
              </v-card-text>
              <v-card-actions>
                <v-spacer></v-spacer>
                <v-btn color="primary" route to='/home'>Login</v-btn>
              </v-card-actions>
            </v-card>
          </v-col>
        </v-row>
      </v-container>
</v-app>
        
</template>

<script>
export default {
  props: {
    source: String,
  },
  data(){
    return{
      dialog:false,
      image_src:"https://picsum.photos/id/11/500/300"
    }
  }
}
</script>
